<template>
  <div class="home-container">
    <van-swipe style="height:150px" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img src="@/assets/images/banner1.png" style="width: 100%;">
      </van-swipe-item>
      <van-swipe-item>
        <img src="@/assets/images/banner2.png" style="width: 100%;">
      </van-swipe-item>
      <van-swipe-item>
        <img src="@/assets/images/banner3.png" style="width: 100%;">
      </van-swipe-item>
    </van-swipe>
    <van-notice-bar left-icon="volume-o" :scrollable="false">
      <van-swipe
        style="height:40px;line-height:40px"
        vertical
        class="notice-swipe"
        :autoplay="3000"
        :show-indicators="false"
      >
        <van-swipe-item>王楚钦采访名场面又来了</van-swipe-item>
        <van-swipe-item>倪夏莲恭喜莎头夺金：你们是最棒的</van-swipe-item>
        <van-swipe-item>乒联副主席刘国梁为莎头颁奖 拍打王楚钦双脸太有爱</van-swipe-item>
      </van-swipe>
    </van-notice-bar>
    <van-grid>
      <van-grid-item v-if="T.isWeiXin()" icon="photo-o" text="绑定微信" @click="bindWeiXin" />
    </van-grid>
    <van-collapse v-model="activeNames">
      <van-collapse-item v-if="query" title="授权参数" name="query">
        {{ query }}
      </van-collapse-item>
      <van-collapse-item title="用户信息" name="user">
        {{ userInfo }}
      </van-collapse-item>
      <van-collapse-item title="角色信息" name="role"><span v-for="role in roles" :key="role">{{ role }}</span></van-collapse-item>
    </van-collapse>
    <van-cell-group title="服务看板">
      <van-cell is-link>
        <template>
          {{ updateTime | formatDate(T.DATE_TIME_FMT1) }}
        </template>
        <template #right-icon>
          <van-icon name="replay" @click="handleClickUpdate" />
        </template>
      </van-cell>
      <van-cell title="服务器">
        <template #label>
          <van-row>
            <van-col span="8">服务器名称</van-col>
            <van-col span="16" class="tr">{{ server.sys.computerName }}</van-col>
          </van-row>
          <van-row>
            <van-col span="8">操作系统</van-col>
            <van-col span="16" class="tr">{{ server.sys.osName }}</van-col>
          </van-row>
          <van-row>
            <van-col span="8">服务器IP</van-col>
            <van-col span="16" class="tr">{{ server.sys.computerIp }}</van-col>
          </van-row>

          <van-row>
            <van-col span="8">系统架构</van-col>
            <van-col span="16" class="tr">{{ server.sys.osArch }}</van-col>
          </van-row>
        </template>
      </van-cell>
      <van-cell title="CPU">
        <template #label>
          <van-row>
            <van-col span="8">核心数</van-col>
            <van-col span="16" class="tr">{{ server.cpu.cpuNum }}</van-col>
          </van-row>
          <van-row>
            <van-col span="8">用户使用率</van-col>
            <van-col span="16" class="tr">{{ server.cpu.used }}%</van-col>
          </van-row>
          <van-row>
            <van-col span="8">系统使用率</van-col>
            <van-col span="16" class="tr">{{ server.cpu.sys }}%</van-col>
          </van-row>
          <van-row>
            <van-col span="8">当前空闲率</van-col>
            <van-col span="16" class="tr">{{ server.cpu.free }}%</van-col>
          </van-row>
        </template>
      </van-cell>
      <van-cell title="内存">
        <template #label>
          <van-row>
            <van-col span="8">总内存</van-col>
            <van-col span="16" class="tr">{{ server.mem.total }}G</van-col>
          </van-row>
          <van-row>
            <van-col span="8">已用内存</van-col>
            <van-col span="16" class="tr">{{ server.mem.used }}G</van-col>
          </van-row>
          <van-row>
            <van-col span="8">剩余内存</van-col>
            <van-col span="16" class="tr">{{ server.mem.free }}G</van-col>
          </van-row>
          <van-row>
            <van-col span="8">使用率</van-col>
            <van-col span="16" class="tr">{{ server.mem.usage }}%</van-col>
          </van-row>
        </template>
      </van-cell>
      <van-cell title="虚拟机">
        <template #label>
          <van-row>
            <van-col span="8">Java名称</van-col>
            <van-col span="16" class="tr">{{ server.jvm.name }}</van-col>
          </van-row>
          <van-row>
            <van-col span="8">Java版本</van-col>
            <van-col span="16" class="tr">{{ server.jvm.version }}</van-col>
          </van-row>
          <van-row>
            <van-col span="8">启动时间</van-col>
            <van-col span="16" class="tr">{{ server.jvm.startTime }}</van-col>
          </van-row>
          <van-row>
            <van-col span="8">运行时长</van-col>
            <van-col span="16" class="tr">{{ server.jvm.runTime }}</van-col>
          </van-row>
          <van-row>
            <van-col span="8">安装路径</van-col>
            <van-col span="16" class="tr">{{ server.jvm.home }}</van-col>
          </van-row>
          <van-row>
            <van-col span="8">项目路径</van-col>
            <van-col span="16" class="tr">{{ server.sys.userDir }}</van-col>
          </van-row>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>
<script>
import wxPubAuth from '@/utils/WxPubAuth'

export default {
  name: 'Dashboard',
  data() {
    return {
      activeNames: [],
      query: null,
      updateTime: new Date().getTime(),
      server: {
        cpu: {},
        jvm: {},
        mem: {},
        sys: {},
        sysFiles: []
      },
      interval: null
    }
  },
  watch: {
  },
  created() {
    this.query = this.$route.query
    this.loadSystemInfo(true)
    this.interval = window.setInterval(() => {
      this.loadSystemInfo()
    }, 1000 * 60)
  },
  destroyed() {
    if (this.interval) {
      clearInterval(this.interval)
    }
  },
  methods: {
    bindWeiXin() {
      wxPubAuth.doWxPubAuth()
    },
    handleClickUpdate() {
      this.loadSystemInfo(true)
    },
    async loadSystemInfo(loading = false) {
      try {
        this.updateTime = new Date().getTime()
        this.server = await this.$store.dispatch('monitorServer', { loading: loading })
      } catch (err) {
        if (this.interval) {
          window.clearInterval(this.interval)
        }
      }
    }
  }
}
</script>

  <style lang="scss" scoped >
  .home-container {
    height: 100%;
    overflow: auto;
    .van-cell__label{
      .van-row{
        margin-top: 10px;
      }
    }
  }
  </style>

